<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      style="padding: 24px;"
    >
      <div
        class="ant-pro-checkcard-group"
      >
        <div
          class="ant-pro-checkcard ant-pro-checkcard-sm ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    🍎 Apple
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-sm ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    🍐 Pear
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-sm ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    🍊 Orange
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <br />
      <div
        class="ant-pro-checkcard-group"
      >
        <div
          class="ant-pro-checkcard ant-pro-checkcard-loading ant-pro-checkcard-sm ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-loading-content"
          >
            <div
              class="ant-skeleton ant-skeleton-active"
            >
              <div
                class="ant-skeleton-content"
              >
                <ul
                  class="ant-skeleton-paragraph"
                >
                  <li />
                  <li />
                  <li />
                  <li
                    style="width: 61%;"
                  />
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-loading ant-pro-checkcard-sm ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-loading-content"
          >
            <div
              class="ant-skeleton ant-skeleton-active"
            >
              <div
                class="ant-skeleton-content"
              >
                <ul
                  class="ant-skeleton-paragraph"
                >
                  <li />
                  <li />
                  <li />
                  <li
                    style="width: 61%;"
                  />
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-loading ant-pro-checkcard-sm ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-loading-content"
          >
            <div
              class="ant-skeleton ant-skeleton-active"
            >
              <div
                class="ant-skeleton-content"
              >
                <ul
                  class="ant-skeleton-paragraph"
                >
                  <li />
                  <li />
                  <li />
                  <li
                    style="width: 61%;"
                  />
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <br />
      <div
        class="ant-divider ant-divider-horizontal"
        role="separator"
      />
      <div
        class="ant-pro-checkcard-group"
      >
        <div
          class="ant-pro-checkcard-group-sub-check-card"
        >
          <div
            class="ant-pro-checkcard-group-sub-check-card-title"
          >
            <span
              aria-label="right"
              class="anticon anticon-right"
              role="img"
              style="transform: rotate(0deg); transition: transform 0.3s;"
            >
              <svg
                aria-hidden="true"
                data-icon="right"
                fill="currentColor"
                focusable="false"
                height="1em"
                viewBox="64 64 896 896"
                width="1em"
              >
                <path
                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
                />
              </svg>
            </span>
            Fruit
          </div>
          <div
            class="ant-pro-checkcard-group-sub-check-card-panel"
          >
            <div
              class="ant-pro-checkcard ant-pro-checkcard-sm ant-pro-checkcard-bordered"
            >
              <div
                class="ant-pro-checkcard-content"
              >
                <div
                  class="ant-pro-checkcard-detail"
                >
                  <div
                    class="ant-pro-checkcard-header"
                  >
                    <div
                      class="ant-pro-checkcard-header-left"
                    >
                      <div
                        class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                      >
                        🍎 Apple
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="ant-pro-checkcard ant-pro-checkcard-sm ant-pro-checkcard-bordered"
            >
              <div
                class="ant-pro-checkcard-content"
              >
                <div
                  class="ant-pro-checkcard-detail"
                >
                  <div
                    class="ant-pro-checkcard-header"
                  >
                    <div
                      class="ant-pro-checkcard-header-left"
                    >
                      <div
                        class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                      >
                        🍐 Pear
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="ant-pro-checkcard ant-pro-checkcard-sm ant-pro-checkcard-bordered"
            >
              <div
                class="ant-pro-checkcard-content"
              >
                <div
                  class="ant-pro-checkcard-detail"
                >
                  <div
                    class="ant-pro-checkcard-header"
                  >
                    <div
                      class="ant-pro-checkcard-header-left"
                    >
                      <div
                        class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                      >
                        🍊 Orange
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-divider ant-divider-horizontal"
        role="separator"
      />
      <br />
      <div
        class="ant-pro-checkcard-group"
      >
        <div
          class="ant-pro-checkcard ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    🍊 Orange
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    🍐 Pear
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    🍎 Apple
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <br />
      <div
        class="ant-divider ant-divider-horizontal"
        role="separator"
      />
      <div
        class="ant-pro-checkcard-group"
      >
        <div
          class="ant-pro-checkcard ant-pro-checkcard-loading ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-loading-content"
          >
            <div
              class="ant-skeleton ant-skeleton-active"
            >
              <div
                class="ant-skeleton-content"
              >
                <ul
                  class="ant-skeleton-paragraph"
                >
                  <li />
                  <li />
                  <li />
                  <li
                    style="width: 61%;"
                  />
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-loading ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-loading-content"
          >
            <div
              class="ant-skeleton ant-skeleton-active"
            >
              <div
                class="ant-skeleton-content"
              >
                <ul
                  class="ant-skeleton-paragraph"
                >
                  <li />
                  <li />
                  <li />
                  <li
                    style="width: 61%;"
                  />
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-loading ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-loading-content"
          >
            <div
              class="ant-skeleton ant-skeleton-active"
            >
              <div
                class="ant-skeleton-content"
              >
                <ul
                  class="ant-skeleton-paragraph"
                >
                  <li />
                  <li />
                  <li />
                  <li
                    style="width: 61%;"
                  />
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        CheckCard.Group Options Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            options
          </strong>
          : 选项配置，可以是字符串数组或对象数组
        </li>
        <li>
          <strong>
            size
          </strong>
          : 卡片尺寸，可选值：'large' | 'default' | 'small'
        </li>
        <li>
          <strong>
            loading
          </strong>
          : 是否显示加载状态，布尔值
        </li>
        <li>
          <strong>
            defaultValue
          </strong>
          : 默认选中的值
        </li>
      </ul>
      <h4>
        Options 配置方式：
      </h4>
      <ul>
        <li>
          <strong>
            字符串数组
          </strong>
          : ['🍎 Apple', '🍐 Pear', '🍊 Orange']，自动生成 CheckCard
        </li>
        <li>
          <strong>
            对象数组
          </strong>
          : 包含 title、value、children 等属性的对象
        </li>
        <li>
          <strong>
            子组件方式
          </strong>
          : 直接使用 CheckCard 子组件
        </li>
      </ul>
      <h4>
        Option 对象属性：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 选项标题，显示文本
        </li>
        <li>
          <strong>
            value
          </strong>
          : 选项值，用于标识和表单绑定
        </li>
        <li>
          <strong>
            children
          </strong>
          : 子选项数组，支持嵌套结构
        </li>
        <li>
          <strong>
            description
          </strong>
          : 选项描述信息
        </li>
        <li>
          <strong>
            avatar
          </strong>
          : 选项头像
        </li>
      </ul>
      <h4>
        Loading 状态：
      </h4>
      <ul>
        <li>
          <strong>
            loading
          </strong>
          : 设置为 true 时显示加载动画
        </li>
        <li>
          <strong>
            适用场景
          </strong>
          : 数据加载中、异步操作等
        </li>
        <li>
          <strong>
            视觉效果
          </strong>
          : 卡片会显示骨架屏或加载动画
        </li>
      </ul>
      <h4>
        使用建议：
      </h4>
      <ul>
        <li>
          <strong>
            简单选项
          </strong>
          : 使用字符串数组或简单对象数组
        </li>
        <li>
          <strong>
            复杂选项
          </strong>
          : 使用 CheckCard 子组件方式
        </li>
        <li>
          <strong>
            嵌套结构
          </strong>
          : 使用 children 属性创建分组
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>